<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ecommerce Template</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <!-- 标题栏 -->
        <div class="title-bar" data-responsive-toggle="mainNavigation" data-hide-for="medium">
            <div class="title-bar-left">
                <button class="menu-icon" type="button" data-toggle="mainNavigation"></button>
                <div class="title-bar-title">Menu</div>
            </div>
            <div class="title-bar-right">Marketing Site</div>
        </div>
        <!-- ./标题栏 -->
        <!-- 顶部栏 -->
        <div class="top-bar" id="mainNavigation">
            <div class="top-bar-left">
                <ul class="menu vertical medium-horizontal">
                    <li class="menu-text hide-for-small-only">Marketing Site</li>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu vertical medium-horizontal">
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                    <li><a href="#">Five</a></li>
                    <li><a href="#">Six</a></li>
                </ul>
            </div>
        </div>
        <!-- ./顶部栏 -->
        <!-- 轮播 -->
        <div
                class="orbit"
                role="region"
                aria-label="Favorite Space Pictures"
                data-orbit
                data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft: fade-out; animOutToRight: fade-out">
            <ul class="orbit-container">
                <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
                <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
                <li class="orbit-slide is-active">
                    <figure class="orbit-figure text-center">
                        <img src="https://placehold.it/2000x750&text=lst" alt="Space" class="orbit-image">
                        <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
                    </figure>
                </li>
                <li class="orbit-slide">
                    <figure class="orbit-figure">
                        <img src="https://placehold.it/2000x750&text=2nd" alt="Space" class="orbit-image">
                        <figcaption class="orbit-caption text-center">Lets Rocket!</figcaption>
                    </figure>
                </li>
                <li class="orbit-slide">
                    <figure class="orbit-figure">
                        <img src="https://placehold.it/2000x750&text=3nd" alt="Space" class="orbit-image">
                        <figcaption class="orbit-caption text-center">Encapsulating</figcaption>
                    </figure>
                </li>
                <li class="orbit-slide">
                    <figure class="orbit-figure">
                        <img src="https://placehold.it/2000x750&text=4nd" alt="Space" class="orbit-image">
                        <figcaption class="orbit-caption text-center">Outta This World</figcaption>
                    </figure>
                </li>
            </ul>
            <nav class="orbit-bullets">
                <button data-slide="0" class="is-active"><span class="show-for-sr">First slide details</span><span
                        class="show-for-sr">Current Slide</span></button>
                <button data-slide="1"><span class="show-for-sr">First slide details</span></button>
                <button data-slide="2"><span class="show-for-sr">First slide details</span></button>
                <button data-slide="3"><span class="show-for-sr">First slide details</span></button>
            </nav>
        </div>
        <!-- ./轮播 -->
        <br>
        <div class="text-center">
            <h2>Our Newest Products</h2>
            <hr>
        </div>
        <article class="grid-container">
            <div class="grid-x grid-margin-x small-up-2 medium-up-3 large-up-4">
                <div class="cell">
                    <img src="https://placehold.it/500x600" alt="" class="thumbnail">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$1400</p>
                    <a href="#" class="button expanded">Buy</a>
                </div>
                <div class="cell">
                    <img src="https://placehold.it/500x600" alt="" class="thumbnail">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$2400</p>
                    <a href="#" class="button expanded">Buy</a>
                </div>
                <div class="cell">
                    <img src="https://placehold.it/500x600" alt="" class="thumbnail">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$3400</p>
                    <a href="#" class="button expanded">Buy</a>
                </div>
                <div class="cell">
                    <img src="https://placehold.it/500x600" alt="" class="thumbnail">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>4400</p>
                    <a href="#" class="button expanded">Buy</a>
                </div>
                <div class="cell">
                    <img src="https://placehold.it/500x600" alt="" class="thumbnail">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$5400</p>
                    <a href="#" class="button expanded">Buy</a>
                </div>
                <div class="cell">
                    <img src="https://placehold.it/500x600" alt="" class="thumbnail">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$6400</p>
                    <a href="#" class="button expanded">Buy</a>
                </div>
                <div class="cell">
                    <img src="https://placehold.it/500x600" alt="" class="thumbnail">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$7400</p>
                    <a href="#" class="button expanded">Buy</a>
                </div>
                <div class="cell">
                    <img src="https://placehold.it/500x600" alt="" class="thumbnail">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$8400</p>
                    <a href="#" class="button expanded">Buy</a>
                </div>
            </div>
            <hr>
            <div class="grid cell">
                <div class="callout primary">
                    <h3>Really big special this week on items.</h3>
                </div>
            </div>
            <hr>
            <div class="text-container">
                <h2>Some Other Neat Products</h2>
                <hr>
            </div>
            <div class="grid-x grid-margin-x small-up-2 medium-up-3 large-up-6">
                <div class="cell">
                    <img class="thumbnail" src="https://placehold.it/300x400">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$400</p>
                    <a href="#" class="button small expanded hollow">Buy</a>
                </div>
                <div class="cell">
                    <img class="thumbnail" src="https://placehold.it/300x400">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$400</p>
                    <a href="#" class="button small expanded hollow">Buy</a>
                </div>
                <div class="cell">
                    <img class="thumbnail" src="https://placehold.it/300x400">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$400</p>
                    <a href="#" class="button small expanded hollow">Buy</a>
                </div>
                <div class="cell">
                    <img class="thumbnail" src="https://placehold.it/300x400">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$400</p>
                    <a href="#" class="button small expanded hollow">Buy</a>
                </div>
                <div class="cell">
                    <img class="thumbnail" src="https://placehold.it/300x400">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$400</p>
                    <a href="#" class="button small expanded hollow">Buy</a>
                </div>
                <div class="cell">
                    <img class="thumbnail" src="https://placehold.it/300x400">
                    <h5>Nulla At Nulla Justo, Eget</h5>
                    <p>$400</p>
                    <a href="#" class="button small expanded hollow">Buy</a>
                </div>
            </div>
            <hr>
            <div class="grid-x align-bottom">
                <div class="cell medium-4">
                    <h4>Top Products</h4>
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                    <div class="media-object">
                        <div class="media-object-section">
                            <img class="thumbnail" src="https://placehold.it/100x100">
                        </div>
                        <div class="media-object-section">
                            <h5>Nunc Eu Ullamcorper Orci</h5>
                            <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <br>
        <!-- 底部 -->
        <footer class="callout large secondary">
            <article class="grid-container">
                <div class="grid-x">
                    <div class="cell large-4">
                        <h5>Vivamus Hendrerit Arcu Sed Erat Molestie</h5>
                        <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas
                            est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
                            per inceptos himenaeos. Sed molestie augue sit.</p>
                    </div>
                    <div class="cell large-3 large-offset-2">
                        <ul class="menu vertical">
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                            <li><a href="#">Four</a></li>
                        </ul>
                    </div>
                    <div class="cell large-3">
                        <ul class="menu vertical">
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                            <li><a href="#">Four</a></li>
                        </ul>
                    </div>
                </div>
            </article>
        </footer>
        <!-- ./底部 -->
        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/what-input/dist/what-input.js"></script>
        <script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
